<template>
	<div style='height:100%;' ref='container'>
		<v-chart v-if='value' style='height: 100%;width: 100%;' :options='options'></v-chart>
		<loading v-else></loading>
	</div>
</template>

<script>
	export default {
		name : 'device-pie-chart',

		props : {
			value : {
				type : [Array, Object],
				default : function() {
					return []
				}
			}
		},
		
		data() {
			return {
				show : false
			}
		},
		
		computed : {
			options () {
				var colorList = [
					['rgba(33,42,61,0.6)', '#64c0ea'],
					['rgba(35,44,60,0.6)', '#fccc54'],
					['rgba(32,42,61,0.6)', '#3decbc'],
					['rgba(32,42,62,0.6)', '#1a7efd'],
				]
				var data = this.value
                // var data = [
                //     {name : 'wifi1', value : 0.25},
                //     {name : 'wifi2', value : 0.25},
                //     {name : 'wifi3', value : 0.25},
                //     {name : 'wifi4', value : 0.25}
                // ]
				var categoryNameList = []
				var frameData = []
				var seriesData = []
				data.forEach((item, index) => {
					categoryNameList.push(item.name)
					var color = colorList.shift()
                	colorList.push(color)
					frameData.push({value : 100, v : item.value, itemStyle : {borderColor : color[1]}})

					
					seriesData.push(
						{
							value : 99 * item.value,
							itemStyle : {
										color : new VueECharts.graphic.LinearGradient(0, 0, 1, 0, [{
										offset: 0,
										color: color[0]
									},
									{
										offset: 1,
										color: color[1]
									}
								], false)
							}
						},
					)

				})

				
				var options =  {
					grid : {
						top : '0px',
						right : '70px',
						bottom : '0px',
						left : '75px'
					},

					xAxis : {
						type : 'value',
						max : 100,
						splitLine : {
							show : false
						},
						axisLine : {
							show : false
						},
						axisTick : {
							show : false
						},
						axisLabel : {
							show : false
						}
					},

					yAxis : [
						{
							type : 'category',
							splitNumber : 4,
							axisLine : {
								show : false
							},
							axisTick : {
								show : false
							},
							axisLabel : {
								color : '#a9abaf',
								fontSize : 14,
								lineHeight : 16,
								margin : 15
							},
							data : categoryNameList
						},

						{
							type : 'category',
							splitNumber : 4,
							axisLine : {
								show : false
							},
							axisTick : {
								show : false
							},
							axisLabel : {
								show : false
							},
							data : categoryNameList
						}
					],

					series : [
						{ //框框
							type : 'bar',
							barWidth : 18,
							color : 'transparent',
							yAxisIndex : 0,
							itemStyle : {
								borderWidth : 1,
								borderColor : '#146f7c',
								barBorderRadius : 9,
							},
							label : {
								show : true,
								position : 'right',
								fontSize : 14,
								distance : 10,
								color : '#5e85d7',
								formatter : function(params) {
									return params.data.v * 100 + '%'
								}
							},
							data : frameData
						},

						{ //渐变条
							type : 'bar',
							barWidth : 10,
							yAxisIndex : 1,
							itemStyle : {
								barBorderRadius : 5,
							},
							data : seriesData
						}
					]
				}

				return options
			}
		},

		mounted () {
			this.show = true
		}
	}
</script>